<template>
	<view class="container">
		<z-paging ref="paging" v-model="itemList" @query="queryList" :flex="true" empty-view-text="暂无数据~"
			empty-view-img="/static/empty.png" :empty-view-img-style="imgStyle">
			<view class="containner">
				<view slot="top">
					<u-navbar height="50" :is-back="false" title="购物车" :border-bottom="false" title-color="#333"
						title-size="36">
					</u-navbar>
					<view class="editbtn">
						<view class="num">
							购物车共有{{totalNum}}件商品
						</view>
						<view class="rightTitle" v-if="deleteStatus == 0" @click="onCartEdit(1)">编辑</view>
						<view class="rightTitle" v-else @click="onCartEdit(0)">完成</view>
					</view>
				</view>
				<view class="shopView" v-for="(item,index) in itemList" :key="index">
					<view class="shopNameView">
						<view class="checkView" @click="onSelected1(item)">
							<u-icon :name="'/static/icon/select.png'" size="40" v-if="item.selected"></u-icon>
							<u-icon :name="'/static/icon/unselect.png'" size="40" v-else></u-icon>
						</view>
						<view class="shopName">
							<u-icon style="margin-top: 10upx;margin-right: 20upx;" name="/static/icon/shop.png"
								size="32"></u-icon>
							<text>{{item.store_name}}</text>
							<u-icon name="arrow-right" color="#A7A7A7" size="24"></u-icon>
						</view>
					</view>
					<view class="goodsView" v-for="(item1,index1) in item.list" :key="index1">
						<view class="checkView" @click="onSelected(item1)" v-if="item1.goods">
							<image class="checkIcon" src="/static/icon/select.png" v-if="item1.selected"></image>
							<image class="checkIcon" src="/static/icon/unselect.png" v-else></image>
						</view>
						<u-image width="160" height="160" v-if="item1.goods" :src="item1.image[0]"
							border-radius="10"></u-image>
						<!-- <u-image width="160" height="160" border-radius="10" v-else></u-image> -->
						<view class="goodsData" v-if="item1.goods">
							<view class="goodsName">{{item1.goods.name}}</view>
							<view class="goodsSku" v-if="item1.goods.type">{{item1.goods.type}}</view>
							<view class="goodsPriceView">
								<view class="goodsPrice" v-if="item1.goods">¥<text>{{item1.goods.price}}</text>
								</view>
								<view class="goodsPrice" v-else></view>
								<view class="quantityView">
									<view class="reduceView" @click="onGoodsReduce(item1)">
										<u-icon name="minus" color="#666" size="28"></u-icon>
									</view>
									<view class="quantity">{{item1.goods_number}}</view>
									<view class="addView" @click="onGoodsAdd(item1)">
										<u-icon name="plus" color="#666" size="28"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore status="nomore" />
			</view>
		</z-paging>
		<view class="bottomView">
			<view class="checkView" @tap="onTotalSelected()">
				<image class="checkIcon" src="/static/icon/select.png" v-if="isAllSelected"></image>
				<image class="checkIcon" src="/static/icon/unselect.png" v-else></image>
			</view>
			<view class="bottomTitle" style="flex: 1;">全选</view>
			<view class="settleView" v-if="deleteStatus == 0">
				<view class="bottomTitle">合计：</view>
				<view class="totalPrice"><text>¥</text>{{totalPrice}}</view>
				<view class="bottomTotalBtn payBtn" @click="onSettleGoods()">结算({{totalNumber}})</view>
			</view>
			<view v-else>
				<view class="bottomTotalBtn" @click="onDeleteGoods()">删除({{totalNumber}})</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCarlist,
		delCarIds,
		cartChanges,
		delCarts
	} from '../../api/user.js'
	import {
		toast
	} from '../../utils/common.js';
	export default {
		data() {
			return {
				imgStyle: {
					width: '12rem'
				},
				deleteStatus: 0,
				isAllSelected: false,
				totalPrice: '0.00', //商品总价
				totalNumber: 0, //商品总数
				itemList: [],
				totalNum: 0
			}
		},
		onShow() {
			this.$nextTick(function() {
				// this.$refs.paging.reload();
				this.queryList()
			});
			this.isAllSelected = false;
			this.totalNumber = 0;
			this.totalPrice = '0.00'
		},
		methods: {
			onCartEdit(status) {
				this.deleteStatus = status;
			},
			hhh() {
				this.itemList.forEach(item => {
					item.list.forEach(c => {
						this.totalNum += 1
					})
				})
				console.log(this.totalNum);
			},
			queryList(page, pageSize) {
				let self = this;
				getCarlist().then(res => {
					this.totalNum = 0
					console.log(55, res);
					// self.itemList = res.data.data;
					res.list = res.list.map(item=>{
						return {
							...item,
							list:item.list.filter(c=>{
								return c.goods
							})
						}
					})
					self.itemList = res.list.map(item => {
						return {
							...item,
							list:item.list.map(itemA=>{
								return {
									...itemA,
									image:itemA.goods_sku? [itemA.goods_sku.cover_format]:itemA.goods.images_format,
									goods:{
										...itemA.goods,
										price:itemA.goods_sku? itemA.goods_sku.price:itemA.goods.price,
										name:itemA.goods.name,
										type:itemA.goods_sku?JSON.parse(itemA.goods_sku.skus)[0].name:""
									}
									
								}
							})
						};
						
					});
					this.hhh()
				}).catch()
			},
			// 单选
			onSelected(item) {
				if (item.selected) {
					item.selected = false;
				} else {
					item.selected = true;
				}
				// 如果没有选择全部，则取消全部
				this.itemList.forEach((item1) => {
					for (let s of item1.list) {
						if (s.selected) {
							item1.selected = true
						} else {
							item1.selected = false;
							break;
						}
					}
				});
				this.onTotalPrice();
			},
			// 选择店铺下所有
			onSelected1(item) {
				if (item.selected) {
					item.selected = false;
					item.list.map(item1 => {
						item1.selected = false;
					})
				} else {
					item.selected = true;
					item.list.map(item1 => {
						item1.selected = true;
					})
				}
				this.onTotalPrice();
			},
			onShowSku(skus) {
				if (skus) {
					let skuItem = [];
					let skuList = [];

					skuList.forEach((item, index) => {
						skuItem.push(item.name);
					});
					return skuItem.join(',');
				} else {
					return '';
				}
			},
			onGoodsReduce(item) {
				if (item.goods_number > 1) {
					let number = item.goods_number - 1
					this.totalNum -= 1
					let self = this;
					let o = {
						cart_id: item.id,
						goods_number: number
					}
					delCarIds(o).then(res => {

						item.goods_number--;
						self.onTotalPrice();
					})
				} else {
					// this.$utils.tips('购物车数量不能为0');
					toast('商品数量不能为0')
				}
			},
			onGoodsAdd(item) {
				let number = item.goods_number + 1
				this.totalNum += 1
				let self = this;
				let o = {
					cart_id: item.id,
					goods_number: number
				}
				delCarIds(o).then(res => {
					item.goods_number++;
					self.onTotalPrice();
				})
			},
			//计算价格
			onTotalSelected() {
				// console.log(222);
				let totalSelected = true;
				this.itemList.forEach((item) => {
					item.selected = !item.selected;
					for (let s of item.list) {
						s.selected = !s.selected;
					}
				});;
				this.isAllSelected = !totalSelected;
				this.onTotalPrice();
			},
			//计算价格
			onTotalPrice() {
				let totalSelected = true;
				let totalPrice = 0;
				let totalNumber = 0;
				this.itemList.forEach((item) => {
					if (item.selected) {
						// totalPrice += item.goods_sku ? Number(item.goods_sku.price) : 0;
						item.list.map(item1 => {
							if (item1.selected) {
								totalPrice += item1.goods ? (Number(item1.goods.price) * item1
									.goods_number) : 0;
								totalNumber += item1.goods_number;
							}
						})
					} else {
						totalSelected = false;
						item.list.map(item1 => {
							if (item1.selected) {
								totalPrice += item1.goods ? (Number(item1.goods.price) * item1
									.goods_number) : 0;
								totalNumber += item1.goods_number;
							}
						})

					}
				});
				this.isAllSelected = totalSelected;
				this.totalNumber = totalNumber;
				this.totalPrice = totalPrice.toFixed(2);
			},
			onSettleGoods() {
				let self = this;
				let goodsList = []
				goodsList.push({
					count: this.totalNumber
				})

				this.itemList.forEach((item) => {
					let arr = {
						shopId: 0,
						shopName: '',
						list: []
					}
					for (let s of item.list) {
						if (s.selected) {
							arr.list.push({
								cart_id: s.id,
								goods_id: s.goods_id,
								store_id: s.store_id,
								goods_cover: s.goods_sku ? s.goods_sku.cover_format : s.goods.images_format[0],
								goods_name: s.goods.name,
								goods_type:s.goods_sku ?  JSON.parse(s.goods_sku.skus)[0].name:"",
								goods_price: s.goods ? s.goods.price : '',
								goods_number: s.goods_number,
								cost_price: s.goods.cost_price,
								freight_price: s.goods.freight_price
							});

						}
					}
					if (arr.list.length != 0) {
						goodsList.push(arr)
					}
				});
				console.log(goodsList);
				if (this.totalNumber == 0) {
					return toast('您还没有选择宝贝哦');
				}
				if (goodsList.length > 2) {
					return toast('不支持多商户下单');
				}
				if (this.totalNumber != 0) {
					uni.navigateTo({
						url: '/pages/cart-order-confirm/cart-order-confirm?goods=' + JSON.stringify(goodsList)
					})
				}
			},
			onDeleteGoods() {
				let arr = [];
				let that = this
				this.itemList.forEach((item) => {
					for (let s of item.list) {
						if (s.selected) {
							arr.push(s.id)
						}
					}
				});
				let str = arr.join()
				delCarts({
					ids: str
				}).then(res => {
					that.queryList()
				})
			}
		}
	}
</script>

<style>
	@import url('goods-cart.css');

	page {
		background: #F0F1F2;
	}
</style>